<template>
	<view class="introScroll">
		<!-- 右侧字母 -->
		<view class="city_right">
			<text class="letter_item" v-for="(item, index) in letter" :key="index" @tap.stop="letterTap(index)">{{ item }}</text>
		</view>
		<scroll-view scroll-with-animation="true" class="cityListView" scroll-y="true" :scroll-into-view="scrollId">
			<!-- 城市列表 -->
			<view class="forCityView">
				<view class="forCityItem" v-for="(item, index) in allCityList" :key="index">
					<view v-if="item.show" :id="item.letter" class="letterItemFirst">{{ item.letter }}</view>
					<view @click="cityItemClick(index)" class="itemCityContent">
						{{ item.city }}
						<view class="line"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		  letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			//滑动到指定位置
		  scrollId: '',
      allCityList: [],
			//动画
		  animation: {},
      list: [
				{
					city: '阿拉善盟',
					letter: 'A',
				},
				{
					city: '阿拉善',
					letter: 'A',
				},
				{
					city: '鞍山',
					letter: 'A',
				},
				{
					city: '安庆',
					letter: 'A',
				},
				{
					city: '安阳',
					letter: 'A',
				},
				{
					city: '阿坝',
					letter: 'A',
				},
				{
					city: '安顺',
					letter: 'A',
				},
				{
					city: '阿里',
					letter: 'A',
				},
				{
					city: '安康',
					letter: 'A',
				},
				{
					city: '阿克苏',
					letter: 'A',
				},
				{
					city: '阿勒泰',
					letter: 'A',
				},
				{
					city: '澳门',
					letter: 'A',
				},
				{
					city: '北京',
					letter: 'B',
				},
				{
					city: '保定',
					letter: 'B',
				},
				{
					city: '包头',
					letter: 'B',
				},
				{
					city: '巴彦淖尔',
					letter: 'B',
				},
				{
					city: '巴彦淖尔盟',
					letter: 'B',
				},
				{
					city: '巴彦浩特',
					letter: 'B',
				},
				{
					city: '本溪',
					letter: 'B',
				},
				{
					city: '白山',
					letter: 'B',
				},
				{
					city: '白城',
					letter: 'B',
				},
				{
					city: '蚌埠',
					letter: 'B',
				},
				{
					city: '亳州',
					letter: 'B',
				},
				{
					city: '滨州',
					letter: 'B',
				},
				{
					city: '北海',
					letter: 'B',
				},
				{
					city: '百色',
					letter: 'B',
				},
				{
					city: '巴中',
					letter: 'B',
				},
				{
					city: '毕节',
					letter: 'B',
				},
				{
					city: '保山',
					letter: 'B',
				},
				{
					city: '版纳',
					letter: 'B',
				},
				{
					city: '宝鸡',
					letter: 'B',
				},
				{
					city: '白银',
					letter: 'B',
				},
				{
					city: '博尔塔拉',
					letter: 'B',
				},
				{
					city: '巴音郭楞',
					letter: 'B',
				},
			],
		}
	},
	onLoad() {
		this.formatCityData(this.list)
	},
	methods: {
		//字母点击事件
		letterTap(index) {
			console.log(index)
			this.scrollId = this.letter[index]
		},

		// 处理城市数据
		formatCityData: function(array) {
			for (let i = 0; i < array.length; i++) {
				if (i == 0) {
					//第一条显示首字母
					array[i].show = true
				} else if (array[i].letter != array[i - 1].letter) {
					//首字母与上一条不一样需要显示
					array[i].show = true
					array[i - 1].last = true
				}
				if (array.length == 1) {
					array[0].last = true
				}
				array.show = false
			}
			// 处理好的数据拿去循环
			this.allCityList = array
			console.log(this.allCityList)
		},
	},
}
</script>

<style lang="less">
page {
  height: 100%;
  background-color: #fafafa;
}
.introScroll {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  .cityListView {
    // scrollview高度设置vh兼容支付宝
	  height: 100vh;
	  overflow: scroll;
	}
}
/* 右侧字母 */
.city_right {
  z-index: 99;
  width: 60rpx;
  display: flex;
  height: 100%;
	position: absolute;
	right: 0;
	flex-direction: column;
	justify-content: center;
	top: 00rpx;
}

/* 右侧字母 */
.letter_item {
	display: block;
	font-size: 22rpx;
	font-weight: 400;
	color: #333333;
	text-align: center;
	margin-left: 20rpx;
	padding-top: 3rpx;
	margin-bottom: 8rpx;
	width: 26rpx;
	height: 26rpx;
	line-height: 26rpx;
	background: #d8d8d8;
	border-radius: 50%;
}

.forCityView {
	width: 100%;
	padding-bottom: 30rpx;
}

.forCityItem {
	display: flex;
	flex-direction: column;
	background-color: #fafafa;
}

.letterItemFirst {
	height: 49rpx;
	padding-left: 40rpx;
	font-size: 22rpx;
	line-height: 68rpx;
	font-weight: 400;
	color: #333333;
	background: #fafafa;
	width: 100%;
}

.itemCityContent {
	display: inline-block;
	width: 100%;
	height: 88rpx;
	font-size: 28rpx;
	color: #000000;
	padding-left: 40rpx;
	background-color: #fafafa;
	padding: 0 30rpx;
	line-height: 88rpx;
	margin-bottom: 1rpx;
}
.line {
	width: 642rpx;
	height: 5rpx;
	background-color: #e5e5e5;
}
</style>
